html,
body,
#app {
	height: 100%;
	overflow: hidden;
}

.flex {
	display: flex;

	&1 {
		flex: 1;
	}

	&2 {
		flex: 2;
	}

	&3 {
		flex: 3;
	}

	&4 {
		flex: 4;
	}

	&5 {
		flex: 5;
	}

	&025 {
		flex: 0 0 25%;
	}

	&024 {
		flex: 0 0 24%;
	}

	&.vertical {
		flex-flow: column nowrap;
	}

	&.like-float {
		flex-flow: row wrap;

		.el-button + .el-button {
			margin-left: 0;
		}
	}

	&.between {
		justify-content: space-between;
	}

	&.start {
		justify-content: flex-start;
	}

	&.end {
		justify-content: flex-end;
	}

	&.center {
		justify-content: center;
	}

	&.middle {
		align-items: center;
	}

	&.baseline {
		align-items: baseline;
	}
}

.width100 {
	width: 100%;
}
.height100 {
	height: 100%;
}

.width50 {
	width: 50px;
}

.width70 {
	width: 70px;
}

.width80 {
	width: 80px;
}

.width120 {
	width: 120px;
}

.width150 {
	width: 150px;
}

.width180 {
	width: 180px;
}

.width240 {
	width: 240px !important;
}

.width360 {
	width: 360px;
}
.width501 {
	width: 50%;
}


/* gap-gap-gap-gap-gap */
.gapFn(@pos;@right;@gap){
	.m@{pos}@{gap}{
		margin-@{right}:@gap*1px;
	}
	.p@{pos}@{gap}{
		padding-@{right}:@gap*1px;
	}
}

.loopGapFn(@gap){
	.gapFn(t;top;@gap);
	.gapFn(r;right;@gap);
	.gapFn(b;bottom;@gap);
	.gapFn(l;left;@gap);
}

.loopGapFn(5);
.loopGapFn(8);
.loopGapFn(10);
.loopGapFn(20);
/* gap-gap-gap-gap-gap */

.tr {
	text-align: right;
}

.mlt {
	margin-left: 10px;
	margin-top: 10px;
}

.grid {
	display: grid;

	&.col1 {
		grid-template-columns: repeat(1, 1fr);
	}

	&.col2 {
		grid-template-columns: repeat(2, 1fr);
	}

	&.col3 {
		grid-template-columns: repeat(3, 1fr);
	}

	&.col4 {
		grid-template-columns: repeat(4, 1fr);
	}

	&.col5 {
		grid-template-columns: repeat(5, 1fr);
	}

	&.col11 {
		grid-template-columns: 1fr 1fr;
	}

	&.col12 {
		grid-template-columns: 1fr 2fr;
	}

	&.col211 {
		grid-template-columns: 2fr 1fr 1fr;
	}

	&.row11 {
		grid-template-rows: 1fr 1fr;
	}

	&.row45 {
		grid-template-rows: 4fr 5fr;
	}

	&.gap16 {
		grid-row-gap: 16px;
		grid-column-gap: 16px;
	}
}

.gap16 {
	grid-row-gap: 16px; //上下
	grid-column-gap: 16px; //左右
}

.grid-column-gap15 {
	grid-column-gap: 15px; //左右
}

.grid-row-gap20 {
	grid-row-gap: 20px;
}

.gridcol1 {
	grid-template-columns: repeat(1, 1fr);
}

.gridcol2 {
	grid-template-columns: repeat(2, 1fr);
}

.gridcol3 {
	grid-template-columns: repeat(3, 1fr);
}

.gridcol4 {
	grid-template-columns: repeat(4, 1fr);
}

.gridcol5 {
	grid-template-columns: repeat(5, 1fr);
}

.grid-response {
	display: grid;
	grid-template-columns: repeat(24, 1fr);

	@iterations: 1;
	.span-loop (@i) when (@i <= 24) {
		.grid-col-@{i} {
			grid-column: ~"span @{i}";
		}
		.span-loop(@i + 1);
	}
	.span-loop (@iterations);
}

.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.flexWrap {
	flex-wrap: wrap;
}

/* 美化滑动条 */
.beautiful-scroll::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	background-color: white;
	/* or add it to the track */
}

.beautiful-scroll::-webkit-scrollbar-thumb {
	background: rgba(144, 147, 153, 0.5);
	border-radius: 4px;
	border: 1px solid white;
}
